<template>
  <div>
    <el-card>
      <div class="container">
        <el-form :inline="true" :model="conditionModel">
          <el-form-item label="专业名称">
            <el-input v-model="conditionModel.majorName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="专业主任">
            <el-select v-model="conditionModel.majorDirectorName" clearable placeholder="请选择"
                       @visible-change="searchDirectorName">
              <el-option
                  v-for="item in supplierDirectorName"
                  :key="item.techId"
                  :label="item.techName"
                  :value="item.techId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属专业">
            <el-cascader
                ref="facultyDemo"
                v-model="supplierFaculty"
                :options="options"
                :props="{ value: 'parentId', label: 'parentName'}"
                @change="serachDepart"
                clearable
                :show-all-levels="false">
            </el-cascader>
          </el-form-item>
          <el-form-item label="专业状态">
            <el-select v-model="conditionModel.status" placeholder="请选择">
              <el-option
                  v-for="status in statusOptions"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="myBtn">
            <el-form-item>
              <el-button type="primary" @click="searchCondition" class="btn_serach">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reset" class="btn_reset">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="insert" class="btn_insert">新增</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          highlight-current-row
          class="majorTable"
      >
        <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            align="center"
        width="100px">
        </el-table-column>
        <el-table-column
            prop="majorNo"
            label="专业编号"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="majorName"
            label="专业名称"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="techName"
            label="专业主任"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="facultyName"
            label="所属院系"
            align="center">
        </el-table-column>
        <el-table-column
            prop="status"
            align="center"
            width="120"
            label="专业状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.status === 1" type="success" size="medium">正常</el-tag>
            <el-tag v-if="scope.row.status === 2" type="warning" size="medium">暂停</el-tag>
            <el-tag v-if="scope.row.status === 3" type="danger" size="medium">撤销</el-tag>
          </template>
        </el-table-column>
        <el-table-column
                prop="checkStatus"
                align="center"
                width="120"
                label="操作状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.checkStatus === 1" type="primary" size="medium">正常</el-tag>
            <el-tag v-if="scope.row.checkStatus === 2" type="warning" size="medium">待审核</el-tag>
            <el-tag v-if="scope.row.checkStatus === 3" type="success" size="medium">审核通过</el-tag>
            <el-tag v-if="scope.row.checkStatus === 4" type="danger" size="medium">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template slot-scope="scope">
            <el-button @click="handleClickShow(scope.row) " type="primary" size="small">查看</el-button>
            <el-button @click="handleClickUpdate(scope.row) " type="danger" size="small" v-if="scope.row.checkStatus != 2 && scope.row.checkStatus != 3 && scope.row.checkStatus != 4 ">编辑</el-button>
            <el-button @click="handleClickRejecteCheck(scope.row) " type="danger" size="small" v-if=" scope.row.checkStatus==4 " >确认</el-button>
            <el-button @click="handleClickConfirm(scope.row) " type="success" size="small" v-if=" scope.row.checkStatus==3 " >确认</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :page-sizes="[5, 10, 20, 30]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total.sync="total">
      </el-pagination>
    </el-card>
    <!--查看信息模态框-->
    <el-dialog title="专业信息" :visible.sync="dialogTableVisible"  :close-on-click-modal='false' >
      <!--      <el-card>-->
      <el-form ref="majorForm" :model="majorInfoModel" label-width="80px">
        <el-form-item label="专业编号" prop="title">
          <el-input v-model="majorInfoModel.majorNo" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="title">
          <el-input v-model="majorInfoModel.majorName" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="专业主任" prop="title">
          <el-input v-model="majorInfoModel.techName" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="院系名称" prop="title">
          <el-input v-model="majorInfoModel.facultyName" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="title" >
          <el-radio-group v-model="majorInfoModel.status" disabled>
            <el-radio border size="small" :label="1">正常</el-radio>
            <el-radio border size="small" :label="2">暂停</el-radio>
            <el-radio border size="small" :label="3">撤销</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!--      </el-card>-->
      <el-table :data="childData" text-align="center">
        <el-table-column property="majorId" label="班级编号" width="150"></el-table-column>
        <el-table-column property="majorName" label="班级名称" width="200"></el-table-column>
        <el-table-column property="techName" label="班级人数"></el-table-column>
        <el-table-column property="facultyName" label="辅导员"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="closedialog">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改模态框-->
    <el-dialog title="专业信息" :visible.sync="dialogTableUpdate" width="550px"  :close-on-click-modal='false' class="updateForm">
      <el-form ref="majorForm" :model="updateMajorInfoModel" label-width="80px" :rules="rules">
        <el-form-item label="专业编号" prop="majorNo">
          <el-input v-model="updateMajorInfoModel.majorNo" readonly="true" class="update_input"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorName">
          <el-input v-model="updateMajorInfoModel.majorName" class="update_input" ></el-input>
        </el-form-item>
        <el-form-item label="专业主任" prop="majorDirector">
          <el-select v-model="updateMajorInfoModel.majorDirector" class="update_select">
            <el-option
                v-for="item in supplierDirectorName"
                :key="item.techId"
                :label="item.techName"
                :value="item.techId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院系名称" >
          <el-cascader
              ref="facultyDemo1"
              v-model="UpdatefacultyName"
              :options="facultyOptionsUpdate"
              :props="{ value: 'parentId', label: 'parentName' }"
              @change="serachFaculty"
              :show-all-levels="false"
              class="update_select">
          </el-cascader>
        </el-form-item>
        <el-form-item label="状态" prop="title" >
          <el-radio-group v-model="updateMajorInfoModel.status">
            <el-radio border  size="small" :label="1">正常</el-radio>
            <el-radio border  size="small" :label="2">暂停</el-radio>
            <el-radio border size="small" :label="3">撤销</el-radio>
          </el-radio-group>
        </el-form-item>
        <div>
          <el-button @click="closeUpdatedialog">取 消</el-button>
          <el-button type="primary" @click="submitUpdate">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!--新增模态框-->
    <el-dialog title="专业信息" :visible.sync="dialogTableInsert" width="550px"  :close-on-click-modal='false' class="insertForm">
      <el-form ref="majorForm" :model="insertMajorInfoModel" label-width="80px" :rules="rules">
        <el-form-item label="专业编号" prop="majorNo">
          <el-input v-model="insertMajorInfoModel.majorNo" readonly="true" class="update_input"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorName">
          <el-input v-model="insertMajorInfoModel.majorName" class="update_input" ></el-input>
        </el-form-item>
        <el-form-item label="专业主任" prop="majorDirector">
          <el-select v-model="insertMajorInfoModel.majorDirector" class="update_select">
            <el-option
                v-for="item in supplierDirectorName"
                :key="item.techId"
                :label="item.techName"
                :value="item.techId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院系名称" >
          <el-cascader
              ref="facultyDemo1"
              v-model="insertfacultyName"
              :options="facultyOptionsInsert"
              :props="{ value: 'parentId', label: 'parentName' }"
              @change="serachFaculty"
              :show-all-levels="false"
              class="update_select">
          </el-cascader>
        </el-form-item>
        <div>
          <el-button @click="closeInsertdialog">取 消</el-button>
          <el-button type="primary" @click="submitInsert">确定新增</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>
import {validateContacts} from "@/assets/utils/validate"
import {majorInfo, getDirectorName, getDepartName, getFacultyName , getMaxId , majorUpdate , majorInsert , clickConfirm} from "@/api/discipline/major/info";
export default {
  name: "MajorIndex",
  data: () => ({
    tableData: [],
    pageIndex: 1,
    pageSize: 10,
    total: 10,
    //查询条件模型数据
    conditionModel: {
      majorName: '',
      majorDirectorName: '',
      status: '',
    },
    majorNo: '',
    //专业主任
    supplierDirectorName: {},
    options: [],
    facultyOptionsUpdate:[],
    facultyOptionsInsert:[],
    supplierFaculty: [],
    UpdatefacultyName:[],
    insertfacultyName:[],
    //专业状态
    statusOptions: [{
      label: '所有',
      value: ''
    }, {
      label: '正常',
      value: '1'
    }, {
      label: '暂停',
      value: '2'
    }, {
      label: '撤销',
      value: '3'
    }],
    dialogTableVisible: false,
    dialogTableUpdate: false,
    dialogTableInsert: false,
    screenLoading : false,
    childData: [],
    majorInfoModel: {
      majorNo: '',
      majorName: '',
      facultyName: '',
      techName: '',
      status:''
    },
    updateMajorInfoModel: {
      majorName: '',
      majorDirector: [],
      status: '',
      majorNo:''
    },
    insertMajorInfoModel: {
      majorName: '',
      majorDirector: [],
      majorNo:''
    },
    rules : {
      majorName:[
        { required: true, message: '请输入专业名称', trigger: 'blur' },{validator:validateContacts , trigger: "blur"}
      ]
    }
  }),

  methods: {
    indexMethod(index){
      let curpage = this.pageIndex   //单前页码，具体看组件取值
      let limitpage = this.pageSize   //每页条数，具体是组件取值
      return (index+1) + (curpage-1)*limitpage

    },
    //刷新显示所有内容
    showAllMajor() {
      let params =  {
      majorNo: this.supplierFaculty[2],
      majorName: this.conditionModel.majorName,
      majorDirector: this.conditionModel.majorDirectorName,
      status: this.conditionModel.status,
      //当前需要显示的页码
      pageIndex: this.pageIndex,
      //每页显示的条数
      pageSize: this.pageSize,
      }
      const loading = this.$loading({           // 声明一个loading对象
        lock: false,                             // 是否锁屏
        text: '正在加载...',                     // 加载动画的文字
        spinner: 'el-icon-loading',             // 引入的loading图标
        background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
        target: '.majorTable',                    // 需要遮罩的区域
        body: true,
      })
      setTimeout(() => {
        loading.close();
      }, 500);
      majorInfo(params).then(response => {
        this.tableData = response.data.list;
        this.pageSize = response.data.pageSize;
        this.pageIndex = response.data.pageNum;
        this.total = response.data.total;
      }).catch(err => {
        console.log(err)
      })
    },
    //所在页码改变时
    handleCurrentChange() {
      this.showAllMajor()
    },
    //所在页尺寸改变时
    handleSizeChange() {
      this.showAllMajor()
    },
    //根据条件进行查找
    searchCondition() {
      this.pageIndex = 1;
      this.showAllMajor()

    },
    //查询专业主任名称
    searchDirectorName() {
      getDirectorName().then(response => {
        this.supplierDirectorName = response.data.list;
      }).catch(err => {
        console.log(err);
      })

    },
    //查询部门名称
    serachDepart() {
      getDepartName().then(response => {
        this.options = response.data
      })

    },
    //查询院系名称
    searchFacultyName() {
      getFacultyName().then(response => {
        this.facultyOptionsInsert = response.data;
      }).catch(err => {
        console.log(err);
      })
    },
    //查询框清空
    reset() {
      this.conditionModel = {}
      this.supplierFaculty = []
      this.showAllMajor()
    },
    //查看信息模态框显示
    handleClickShow(row) {
      this.dialogTableVisible = true
      this.majorInfoModel.facultyName = row.facultyName;
      this.majorInfoModel.majorName = row.majorName;
      this.majorInfoModel.majorNo = row.majorNo;
      this.majorInfoModel.techName = row.techName;
      this.majorInfoModel.status = row.checkStatus;
    },
    //关闭查看模态框
    closedialog() {
      this.dialogTableVisible = false
    },
    //编辑模态框显示
    handleClickUpdate(row) {
      getDirectorName().then(response => {
        this.supplierDirectorName = response.data.list;
        let arr = response.data.list
        let length = arr.length
        for (var i = 0 ; i < length ; i++){
          if(row.techName === arr[i].techName ){
            //数据回显，将主任名称回显至下拉框中，并且在不修改的情况下返回的是id而非row.name
            this.updateMajorInfoModel.majorDirector = arr[i].techId
          }
        }
      })
      this.dialogTableUpdate = true
      this.updateMajorInfoModel.facultyName = row.facultyName;
      this.updateMajorInfoModel.majorName = row.majorName;
      this.updateMajorInfoModel.majorNo = row.majorNo;
      // this.updateMajorInfoModel.majorDirector = row.techName
      this.updateMajorInfoModel.status = row.checkStatus
      this.serachFaculty(row)
    },
    //关闭编辑模态框
    closeUpdatedialog() {
      this.dialogTableUpdate = false
    },
    //级联选择器数据回显
    serachFaculty(row){
      let name = row.facultyName
      getFacultyName().then(response =>{
        let parr = response.data
        this.facultyOptionsUpdate = response.data
        for(var i = 0 ; i<response.data.length ; i++) {
          let carr = parr[i].children
          let clength = response.data[i].children.length
          for (let j = 0 ; j < clength ; j++){
            if (name === carr[j].parentName){
              //数据回显，将学院返回至级联选择器中
              this.UpdatefacultyName = [parr[i].parentId ,carr[j].parentId]
            }
          }
        }
      })
    },
    //提交修改
    submitUpdate(){
      let facultyNo = this.UpdatefacultyName[1];
      let majorName = this.updateMajorInfoModel.majorName;
      let majorDirector = this.updateMajorInfoModel.majorDirector;
      let status = this.updateMajorInfoModel.status
      let majorNo = this.updateMajorInfoModel.majorNo
      let params = {
        facultyNo,
        majorDirector,
        status,
        majorName,
        majorNo
      }
      this.$refs.majorForm.validate((valid) =>{
        if(!valid){
          this.$message("存在非法字符");
          return false;
        }else {
          this.$confirm("是否确认修改?","系统提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            majorUpdate(params).then(response =>{
              if(response.errorCode === "201"){
                this.$message({
                  message: '更新成功,请等待审核',
                  type: 'success'
                });
                this.closeUpdatedialog()
                this.searchCondition()
              }else if(response.errorCode === "500"){
                this.$message({
                  message: '更新失败，请联系管理员',
                  type: 'warning'
                });
              }else if(response.errorCode === "901"){
                this.$message({
                  message: '系统异常',
                  type: 'warning'
                });
              }

            }).catch(err =>{
              console.log(err);
            })
          })
        }
      })
    },
    //新增模态框显示
    insert(){
      this.dialogTableInsert = true
      getMaxId().then(response =>{
        this.insertMajorInfoModel.majorNo = response.data.data
      })
      this.searchFacultyName()
    },
    //关闭新增模态框
    closeInsertdialog(){
      this.dialogTableInsert = false
    },
    //提交新增
    submitInsert(){
      let majorNo = this.insertMajorInfoModel.majorNo
      let majorName = this.insertMajorInfoModel.majorName;
      let facultyNo = this.insertfacultyName[1];
      let majorDirector = this.insertMajorInfoModel.majorDirector;
      let params = {
        majorNo ,
        majorName,
        facultyNo,
        majorDirector
      }
      this.$refs.majorForm.validate((valid) =>{
        if(!valid){
          this.$message("存在非法字符");
          return false;
        }else {
          this.$confirm("是否确认新增?","系统提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            majorInsert(params).then(response =>{
              if(response.errorCode === "201"){
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
              }else if(response.errorCode === "500"){
                this.$message({
                  message: '添加失败，请联系管理员',
                  type: 'warning'
                });
              }else if(response.errorCode === "900"){
                this.$message({
                  message: '系统异常',
                  type: 'warning'
                });
              }
              this.closeInsertdialog();
              this.showAllMajor()
            }).catch(err =>{
              console.log(err);
            })
          })
        }
      })
    },
    //确认通知
    handleClickConfirm(row){
      let majorNo =  row.majorNo;
      let status = row.status
      let data = {
        majorNo , status
      }
      clickConfirm(data).then(() =>{
        this.showAllMajor()
      })
    },
    //驳回通知确认
    handleClickRejecteCheck(row){
      let majorNo =  row.majorNo
      let status = row.status
      let data = {
        majorNo , status
      }
      this.$confirm("是否要重新提交修改？" , "系统提示" ,{
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(()=>{
        this.handleClickUpdate(row)
      }).catch(action=>{
        if(action === 'cancel'){
          this.$message({
            type: 'info',
            message: '放弃提交'
          })
          clickConfirm(data).then(() =>{
            this.showAllMajor()
          })
        }else {
          this.$message({
            type: 'info',
            message: '关闭页面'
          })
        }
      })
    }
  },

  created() {
    this.showAllMajor()
    this.searchDirectorName()

  },
  mounted() {
    this.serachDepart();
  }

}
</script>

<style scoped>

</style>
<style>
.el-input__inner {
  /*width: 350px;*/
  /*float: left;*/
}

.btn_reset  {
  float: left;
  margin-right: 450px;
}

.btn_insert{
  /*float: right;*/
  margin-left: 480px;
}
.el-radio-group {
  padding-right: 130px;
}

.update_input {
  width: 300px;
  float: left;
  display: inline-block;
}

.update_select {
  width: 300px;
  float: left;
}
</style>
